<template>
    <div class="line center-flex-box">
        <div class="area center-flex-box">
            <a class="a-area" @click="goToArea">{{post.area}}</a>
        </div>
        <div class="post">
            <post-item :post="post" :link="link"
                       @changeLabelAttention="changeLabelAttention"></post-item>
        </div>
        <div class="collect center-flex-box">
            <el-button v-if="!collectPost(post.id)" type="success" @click="collect">收藏
            </el-button>
            <el-button v-else type="danger" @click="removeCollect">取消收藏</el-button>
            <el-button v-if="management" type="danger" @click="deletePost" circle>
                <icon-font href="#ceshanchu1"></icon-font>
            </el-button>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import PostItem from '@/components/post/PostItem'

    export default {
        name: 'postItemPlus',
        components: {
            PostItem
        },
        props: {
            post: {
                type: Object,
                required: true
            },
            link: {
                type: Boolean,
                required: false,
                default: false
            },
            linkCollect: {
                type: Boolean,
                required: false,
                default: false
            },
            management: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        computed: {
            ...mapGetters({
                collectPost: 'post/collectPost'
            })
        },
        methods: {
            ...mapActions({
                collectPostAction: 'post/collectPost',
                removeCollectPostAction: 'post/removeCollectPost',
                currentCollectPostsAction: 'post/currentCollectPosts'
            }),
            goToArea () {
                this.$router.push(`/area/${this.post.area}`)
            },
            deletePost () {
                this.$emit('deletePost', this.post.id)
            },
            collect () {
                this.action(this.collectPostAction(this.post.id), data => {
                    this.$message.success('收藏成功')
                    this.post.collectCount++
                    if (this.linkCollect) {
                        this.$emit('reload')
                    } else {
                        this.action(this.currentCollectPostsAction())
                    }
                })
            },
            removeCollect () {
                this.action(this.removeCollectPostAction(this.post.id), data => {
                    this.$message.success('取消收藏成功')
                    this.post.collectCount--
                    if (this.linkCollect) {
                        this.$emit('reload')
                    } else {
                        this.action(this.currentCollectPostsAction())
                    }
                })
            },
            changeLabelAttention (data) {
                if (this.link) {
                    this.$emit('changeLabelAttention', data)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center-flex-box {
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }

    .line {
        width: 100%;

        .area {
            width: 5%;

            .a-area {
                font-size: 18px;
                color: rgba(0, 0, 255, 0.81);
            }

            a {
                text-decoration: none;
                cursor: pointer;
            }

            a:link {
                color: #216278;
            }

            a:visited {
                color: #216278;
            }

            a:hover {
                color: rgba(255, 151, 60, 0.8);
            }

            a:active {
                color: rgba(255, 86, 25, 0.8);
            }
        }

        .post {
            width: 80%;
        }

        .collect {
            width: 15%;
        }
    }
</style>
